<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>

<body>
    <div id="primary" class="prompt">
        <div class="title">警示！</div>
        <div class="message">
            发生未知错误！
            <button>
                <span>取消</span>
            </button>
        </div>
    </div>
</body>
<script src="./jquery-1.12.4.js"></script>
<script>
    let mousedown = false
    let offset = {
        top: 0,
        left: 0
    }
    document.querySelector('#primary .title').addEventListener('mousedown', (e) => {
        mousedown = true
        console.log('111');
        let bounding = e.target.getBoundingClientRect()

        offset.left = e.clientX - bounding.left
        offset.top = e.clientY - bounding.top
    })

    window.addEventListener('mousemove', debounce(duplicate, 10))

    function duplicate(e) {
        if (mousedown) {
            primary.style.left = `${e.clientX - offset.left}px`
            primary.style.top = `${e.clientY - offset.top}px`

            let clone = primary.cloneNode(true)
            clone.removeAttribute('id')
            $(clone).css('z-index', '-1')
            document.body.appendChild(clone)
        }
    }

    window.addEventListener('mouseup', (e) => {
        mousedown = false
    })

    function debounce(func, timeout = 100) {
        let timer
        return (...args) => {
            clearTimeout(timer)
            timer = setTimeout(() => {
                func.apply(this, args)
            }, timeout)
        }
    }
</script>

</html>